@using Abc.Core;
@{
    ViewData["Title"] = "DataConfigIndex";
}
<div class="layui-card layadmin-header">
    <div class="layui-row layui-col-space30">
        <div class="layui-col-xs24">
            <!--列表-->
            <section class="panel panel-padding">
                <section class="panel panel-padding">
                    <form class="layui-form" action="javascript:;" id="queryForm">
                        <div class="layui-inline">
                            <label class="layui-form-mid">关键词</label>
                            <div class="layui-input-inline" style="width: 300px;">
                                <input type="text" id="KeyWords" name="KeyWords" placeholder="输入关键词模糊查询" class="layui-input">
                            </div>
                        </div>

                        <div class="layui-inline">
                            <button id="search" class="layui-btn layui-btn-primary submitbtn" lay-submit lay-filter="search">查找</button>
                            <button id="reset" type="reset" class="layui-btn layui-btn-primary">重置</button>
                        </div>
                    </form>
                </section>
                <div class="group-button">
                    @*<button class="layui-btn layui-btn-sm modal" data-params='{"content": "@(Url.Action("Info"))", "title": "添加","full":"true","type":2}'>
                           添加
                        </button>*@
                    @*<button class="layui-btn layui-btn-sm   layuiadmin-btn-list" data-type="add"> 添加</button>*@
                </div>
                <div class="layui-form">
                    <table id="listData" class="layui-hide" lay-filter="listData"></table>
                </div>
            </section>
        </div>
    </div>
</div>

<script type="text/html" id="tablebar">
    <button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit"><i class="layui-icon layui-icon-edit"></i></button>
    <button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="delete"><i class="layui-icon layui-icon-delete"></i></button>
    <button class="pear-btn pear-btn-sm" id="more_{{d.Id}}"><i class="layui-icon layui-icon-triangle-d"></i></button>
</script>

<script type="text/html" id="toolbar">
    <button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add">
        <i class="layui-icon layui-icon-add-1"></i>
        新增
    </button>
    <button class="pear-btn pear-btn-danger pear-btn-md" lay-event="batchRemove">
        <i class="layui-icon layui-icon-delete"></i>
        删除
    </button>
    <button class="pear-btn pear-btn-success pear-btn-md" lay-event="expandAll">
        <i class="layui-icon layui-icon-spread-left"></i>
        展开
    </button>
    <button class="pear-btn pear-btn-success pear-btn-md" lay-event="foldAll">
        <i class="layui-icon layui-icon-shrink-right"></i>
        折叠
    </button>
</script>
<script type="text/plain" id="moreTool">
    [
        [{txt: "导出信息", event: "progress"}]
        [{txt: "下载文件", event: "resolve"}]
        [{txt: "查看详情", event: "reopen"}]
    ]
</script>

<script type="text/html" id="tpl_IsEnable">
    <input type="checkbox" name="IsEnable" objid="{{d.Id}}" lay-skin="switch" lay-text="启用|禁用" lay-filter="IsEnable" {{ d.IsEnable ? 'checked' : '' }}>
</script>


@section Scripts{
    <script>
        layui.use(['jquery', 'form', 'table', 'laydate', 'upload', 'layer', 'treeTable'], function (exports) {
                let $ = layui.jquery;
                let form = layui.form;
                let table = layui.table;
                let laydate = layui.laydate;
                let upload = layui.upload;
                let dropdown = layui.dropdown;
                let treetable = layui.treeTable;

            var cols = [
                [
                    //, templet: '#tplRechargeState'
                    { type: 'checkbox' },
                    //{ type: 'numbers', fixed: 'left', rowspan: 1 },
                    //{ title: '标签', 'toolbar': '#tplable', fixed: 'left', width: 100 },
                    //{ title: 'ID', field: 'Id', width: 60 },

                    { title: 'ID', field: 'Id', width: 50, align: 'center' },
                    { title: '名称', field: 'Name', minWidth: 60, align: 'left', edit: 'text' },
                    { title: '唯一编码', field: 'Key', minWidth: 100, align: 'left', edit: 'text' },
                    { title: '上级', field: 'PKey', minWidth: 60, align: 'center', edit: 'text', hide: true},
                    { title: '值', field: 'Value', minWidth: 60, align: 'center', edit: 'text'},
                    { title: '值2', field: 'Value2', minWidth: 60, align: 'center', edit: 'text', hide: true},
                    { title: '值3', field: 'Value3', minWidth: 60, align: 'center', edit: 'text', hide: true },
                    { title: '值4', field: 'Value4', minWidth: 60, align: 'center', edit: 'text', hide: true },
                    { title: '值5', field: 'Value5', minWidth: 60, align: 'center', edit: 'text', hide: true },
                    { title: '分组', field: 'GroupName', minWidth: 60, align: 'center', edit: 'text' },
                    { title: '排序', field: 'Sort', minWidth: 60, align: 'center', edit: 'text' },
                    { title: '是否启用', field: 'IsEnable', minWidth: 60, align: 'center', templet:'#tpl_IsEnable' },
                    { title: '备注', field: 'Remark', minWidth: 60, align: 'center', edit: 'text' },
                    { title: '扩展参数', field: 'ExtensionData', minWidth: 60, align: 'center', edit: 'text', hide: true},
                    //{ title: '创建用户ID', field: 'CreatorUserId', minWidth: 60, align: 'center' },
                    //{ title: '创建用户', field: 'CreatorUserName', minWidth: 60, align: 'center' },
                    //{ title: '创建时间', field: 'CreationTime', minWidth: 60, align: 'center' },
                    //{ title: '更新用户ID', field: 'UpdateUserId', minWidth: 60, align: 'center' },
                    //{ title: '更新用户', field: 'UpdateUserName', minWidth: 60, align: 'center' },
                    //{ title: '更新时间', field: 'UpdateTime', minWidth: 60, align: 'center' },
                    //{ title: '默认假删除', field: 'IsDeleted', minWidth: 60, align: 'center' },
                    //{ title: '删除用户ID', field: 'DeletedUserId', minWidth: 60, align: 'center' },
                    //{ title: '删除用户', field: 'DeletedUserName', minWidth: 60, align: 'center' },
                    //{ title: '删除时间', field: 'DeletedTime', minWidth: 60, align: 'center' },

                    { title: '操作', fixed: 'right', width: 160, align: 'left', toolbar: '#tablebar' }
                ]
            ];
            //加载数据
            var search = function (data, callback) {
                $.post('@(Url.Action("GetList"))',
                  //$.get('../../../lib/Pear-Admin-Layui/admin/data/power.json',
                   {
                       TypeCode: $("#TypeCode").val(),
                       KeyWords: $("#KeyWords").val(),
                   },
                   function (res) {
                       if (res.code == 0) callback(res.data);
                       else callback(res.msg);
                   });
            };
            //表格下拉菜单
            window.tableDone = function (res, curr, count) {
                window.dropdowndatahandle(res);
            }
            window.dropdowndatahandle=   function a(data) {
                  $.each(data, function (index, item) {
                      dropdown.render({
                          elem: '#more_' + item.Id
                          , data: [{
                              title: '导出信息'
                              , id: 100
                          }, {
                              title: '下载文件'
                              , id: 101
                          }, {
                              title: '查看详情'
                              , id: 102
                          }]
                          , id: '#more_' + item.Id
                          , click: function (obj) {
                              layer.tips('点击了：' + obj.title, this.elem, { tips: [1, '#5FB878'] })
                          }
                      });
                      if (item.children != undefined && item.children != null) {
                          window.dropdowndatahandle(item.children);
                      }
                  });
              }

                //window.treetable = abc.treetable(treetable, "listData", cols, {
                //    toolbar: '#toolbar', treeIdName: 'powerId', treePidName:'parentId', url: '../../../lib/Pear-Admin-Layui/admin/data/power.json'
                //});
               // window.treetable();
            window.treetable = abc.treetable3("listData", cols, {
                toolbar: '#toolbar',
                reqData: search,
                tree: { arrowType: "arrow2", getIcon: "", iconIndex: 2, isPidData: true, idName: 'Key', pidName: 'PKey' },
                done: window.tableDone
            });

            abc.indexInit();
            // 搜索
            $('#search').click(function () {
                window.refresh();
            });
            //监听头工具栏事件
            treetable.on('toolbar(listData)',function(obj) {
                if (obj.event === 'add') {
                    abc.open({ title:'新增', url:'@(Url.Action("Info"))', area:['90%', '90%'], end:window.refresh });
                } else if (obj.event === 'refresh') {
                    window.refresh();
                } else if (obj.event === 'batchRemove') {
                     var data = window.treetable.checkStatus();
                     if (data.length === 0) {
                         layer.msg("未选中数据", {
                             icon: 3,
                             time: 1000
                         });
                         return false;
                     }
                     let ids = "";
                     for (let i = 0; i < data.length; i++) {
                         ids += data[i].Id + ",";
                     }
                     ids = ids.substr(0, ids.length - 1);
                    // layer.alert(ids);
                     abc.delete({url: "@(Url.Action("Delete"))", data: { ids: ids }, success: function () {window.refresh()}});
                 } else if (obj.event === 'expandAll') {
                     window.treetable.expandAll();
                 } else if (obj.event === 'foldAll') {
                     window.treetable.foldAll();
                 }
            });

            treetable.on('tool(listData)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
                if (obj.event === 'delete') {
                    abc.delete({ url: "@(Url.Action("Delete"))", data: { ids: obj.data.Id }, success: function () {obj.del();window.refresh()}});
                } else if (obj.event === 'edit') {
                    window.edit(obj);
                }
            });
             //刷新
             window.refresh = function () {
                 //table.reload("listData");
                 window.treetable.reload();
             };

             //table 行双击事件
             treetable.on('rowDouble(listData)', function (obj) { window.edit(obj); });
             //table 行中的事件监听
             //编辑
             window.edit=  function(obj) {
                 abc.open({ title: '编辑', url: '@(Url.Action("Info"))/' + obj.data.Id, area: ['90%', '90%'], end: window.refresh });
             }
            //IsEnable 开关事件
            form.on('switch(IsEnable)', function (obj) {
                abc.post({ url: '@(Url.Action("SetState"))', data: { Id: $(this).attr('objid'), state: obj.elem.checked,type:'isenable' }});
            });
            //事件集合
            var active = {
                    example: function () {
                    },
                    example1: function () {
                        }
                    };
            //注册layui-btn 事件
            $('.layui-btn').on('click', function(){
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });

            // 初始化日期选择
            //abc.initDate('StartDate,EndDate');
        });
    </script>
}
